<template>
    <PageLayout>
        <!-- 页面头部 -->
        <section class="py-12 bg-gradient-to-r from-primary/5 to-secondary/5">
            <div class="container mx-auto px-4 text-center">
                <h1 class="text-[clamp(2rem,4vw,3rem)] font-serif font-bold mb-4">关于十一</h1>
                <p class="text-neutral-600 max-w-2xl mx-auto">
                    一个喜欢记录生活、发现美好的普通人
                </p>
            </div>
        </section>

        <!-- 主要内容 -->
        <section class="py-16">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto">
                    <!-- 个人介绍 -->
                    <div class="flex flex-col lg:flex-row gap-12 items-start mb-16">
                        <div class="lg:w-1/3">
                            <div class="relative">
                                <div
                                    class="absolute -inset-6 bg-gradient-to-r from-primary/20 to-secondary/20 rounded-full blur-2xl">
                                </div>
                                <img src="https://picsum.photos/id/64/500/500" alt="十一的照片"
                                    class="relative w-full max-w-sm mx-auto rounded-2xl shadow-lg object-cover aspect-square">
                            </div>
                        </div>

                        <div class="lg:w-2/3">
                            <h2 class="text-2xl font-serif font-bold mb-6">你好，我是十一</h2>

                            <div class="prose prose-neutral max-w-none">
                                <p class="text-neutral-600 mb-4 leading-relaxed">
                                    这个名字来源于对简单美好的向往，就像十月末的暖阳，温柔而不张扬。我是一个普通的上班族，也是一个热爱生活的记录者。
                                </p>

                                <p class="text-neutral-600 mb-4 leading-relaxed">
                                    曾经的我也在快节奏中迷失，每天忙忙碌碌，却不知道在忙什么。直到某个黄昏，我看见夕阳透过梧桐叶的光影，突然意识到生活中有太多被忽略的美好正在悄悄溜走。
                                </p>

                                <p class="text-neutral-600 mb-6 leading-relaxed">
                                    于是有了这个小小的角落——Life 拾光。我想在这里收集那些平凡却珍贵的瞬间：清晨的第一缕阳光、雨后的空气、偶然读到的动人句子，还有那些让心灵安静的时刻。
                                </p>
                            </div>

                            <!-- 标签 -->
                            <div class="flex flex-wrap gap-2 mb-6">
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">摄影爱好者</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">文字收集者</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">慢生活践行者</span>
                                <span class="px-3 py-1 bg-primary/10 text-primary rounded-full text-sm">咖啡爱好者</span>
                            </div>

                            <!-- 社交链接 -->
                            <div class="flex gap-4">
                                <a href="#"
                                    class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-instagram"></i>
                                </a>
                                <a href="#"
                                    class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-weibo"></i>
                                </a>
                                <a href="#"
                                    class="w-12 h-12 rounded-full bg-primary/10 text-primary flex items-center justify-center hover:bg-primary hover:text-white transition-colors">
                                    <i class="fa fa-envelope"></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- 创作理念 -->
                    <div class="bg-white rounded-2xl p-8 shadow-sm mb-16">
                        <h3 class="text-xl font-bold mb-6 text-center">创作理念</h3>
                        <div class="grid md:grid-cols-3 gap-8">
                            <div class="text-center">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fa fa-heart text-2xl text-primary"></i>
                                </div>
                                <h4 class="font-bold mb-2">用心感受</h4>
                                <p class="text-sm text-neutral-600">用心去感受生活中的每一个细节，发现平凡中的不平凡</p>
                            </div>
                            <div class="text-center">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fa fa-camera text-2xl text-primary"></i>
                                </div>
                                <h4 class="font-bold mb-2">真实记录</h4>
                                <p class="text-sm text-neutral-600">不刻意美化，只是真实地记录生活中的美好瞬间</p>
                            </div>
                            <div class="text-center">
                                <div
                                    class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i class="fa fa-share-alt text-2xl text-primary"></i>
                                </div>
                                <h4 class="font-bold mb-2">温暖分享</h4>
                                <p class="text-sm text-neutral-600">希望通过分享，让更多人感受到生活的温暖与美好</p>
                            </div>
                        </div>
                    </div>

                    <!-- 时间线 -->
                    <div class="mb-16">
                        <h3 class="text-xl font-bold mb-8 text-center">我的故事</h3>
                        <div class="relative">
                            <!-- 时间线 -->
                            <div
                                class="absolute left-4 md:left-1/2 transform md:-translate-x-1/2 top-0 bottom-0 w-0.5 bg-primary/20">
                            </div>

                            <div class="space-y-8">
                                <div class="flex items-center">
                                    <div
                                        class="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center relative z-10">
                                        <div class="w-3 h-3 bg-white rounded-full"></div>
                                    </div>
                                    <div class="ml-6 md:ml-0 md:w-1/2 md:pr-8 md:text-right">
                                        <div class="bg-white rounded-lg p-4 shadow-sm">
                                            <h4 class="font-bold text-primary mb-1">2023年9月</h4>
                                            <h5 class="font-semibold mb-2">Life 拾光诞生</h5>
                                            <p class="text-sm text-neutral-600">在一个安静的午后，决定创建这个记录生活美好的小角落</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex items-center md:flex-row-reverse">
                                    <div
                                        class="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center relative z-10">
                                        <div class="w-3 h-3 bg-white rounded-full"></div>
                                    </div>
                                    <div class="ml-6 md:ml-0 md:w-1/2 md:pl-8">
                                        <div class="bg-white rounded-lg p-4 shadow-sm">
                                            <h4 class="font-bold text-primary mb-1">2023年6月</h4>
                                            <h5 class="font-semibold mb-2">开始摄影</h5>
                                            <p class="text-sm text-neutral-600">购买了第一台相机，开始用镜头记录生活中的美好瞬间</p>
                                        </div>
                                    </div>
                                </div>

                                <div class="flex items-center">
                                    <div
                                        class="flex-shrink-0 w-8 h-8 bg-primary rounded-full flex items-center justify-center relative z-10">
                                        <div class="w-3 h-3 bg-white rounded-full"></div>
                                    </div>
                                    <div class="ml-6 md:ml-0 md:w-1/2 md:pr-8 md:text-right">
                                        <div class="bg-white rounded-lg p-4 shadow-sm">
                                            <h4 class="font-bold text-primary mb-1">2022年</h4>
                                            <h5 class="font-semibold mb-2">慢生活觉醒</h5>
                                            <p class="text-sm text-neutral-600">意识到生活不应该只有忙碌，开始学会放慢脚步，感受生活</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 联系方式 -->
                    <div class="bg-gradient-to-r from-primary/5 to-secondary/5 rounded-2xl p-8 text-center">
                        <h3 class="text-xl font-bold mb-4">想要联系我？</h3>
                        <p class="text-neutral-600 mb-6">
                            如果你也喜欢记录生活，或者想要分享你的故事，欢迎与我交流
                        </p>
                        <div class="flex justify-center gap-4">
                            <a href="mailto:life.shiguang@gmail.com"
                                class="flex items-center gap-2 bg-white hover:bg-neutral-50 px-6 py-3 rounded-lg transition-colors shadow-sm">
                                <i class="fa fa-envelope text-primary"></i>
                                <span>邮箱联系</span>
                            </a>
                            <router-link to="/contribute"
                                class="flex items-center gap-2 bg-primary hover:bg-primary/90 text-white px-6 py-3 rounded-lg transition-colors">
                                <i class="fa fa-paper-plane"></i>
                                <span>投稿分享</span>
                            </router-link>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </PageLayout>
</template>

<script setup>
import PageLayout from '@/components/layout/PageLayout.vue'
</script>